//src/store/index.js
import {
  createStore
} from 'vuex'

// 导入数据持久化操作的创建函数
import createPersistedState from 'vuex-persistedstate'


import student from './student'


// 定义一个全局状态
const store = createStore({
  // 开启严格模式,在生产环境中是不开启的,在开发环境中是开启的
  strict: process.env.NODE_ENV !== 'production',
  state() {
    return {
      //全局状态
      count: 100,
      // 该字段是用来放用户登录成功后信息用的
      userInfo:{},
      //当前路由的路径
      currentPath:''
    }
  },
  //放的是唯一修改状态数据的方法 
  mutations: {
    // 这里修改数据整你做同步操作不等异步
    add(state) {
      // setTimeout(() => {
      state.count++
      // }, 1000);
    },
    addNum(state, value) {
      state.count += value
    },
    //保存更新用户数据的函数
    updateUserInfo(state,user){
      state.userInfo = user
      // console.log(user);
    },
    // 修改路径的函数
    changePath(state,url){
      state.currentPath = url
    }
  },
  actions: {
    // 异步操作的地方,异步完了之后还是调用 mutations 的方法进行修改数据
    addActions({commit}) {
      setTimeout(() => {
        //在异步中也需要调用同步修改 
        commit('add')
      }, 1000)
    },
    addNumActions({commit}, value) {
      setTimeout(() => {
        commit('addNum', value)
      }, 1000);
    }
  },
  getters: {
    // 是vue中的计算属性
    getCountAdd(state){
      return state.count * 100
    }
  },
  modules: {
    // 状态模块
    // 关于用户的数据可以写一个用户状态的模块
    // 有关于项目配置的,可以写一个配置的状态模块
    student
  },
  // vuex 配置插件的地方
  plugins: [
    createPersistedState({
      // 配置需要持久化的数据
      reducer: state => {
        return {
          //需要持久化的数据
          count: state.count,
          //使的userInfo可以持久化
          userInfo:state.userInfo
        }
      }
    })
  ]
})

export default store